<!-- 课程发布 - 其它设置 -->
<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail" class="w-50%">
        <el-form-item :label="index === 0 ? '课程特点' : ''" v-for="item, index in formData.courseFeatures" :key="index">
            <div class="w-100% flex flex-items-center">
                <el-input v-model="formData.courseFeatures[index]" :maxlength="100" placeholder="请输入课程特点" />
                <Icon class="ml-5px c-red cursor-pointer" icon="ep:delete" @click="handleDelete('courseFeatures', index)" />
            </div>
        </el-form-item>
        <el-form-item :label="formData.courseFeatures.length ? '' : '课程特点'">
            <el-button class="button-new-tag ml-1" size="small" @click="handleAdd('courseFeatures')">
                + 添加
            </el-button>
        </el-form-item>
        <!-- <el-form-item :label="index === 0 ? '拼团介绍' : ''" v-for="item, index in formData.introduce1" :key="index">
            <div class="w-100% flex flex-items-center">
                <el-input v-model="formData.introduce1[index]" :maxlength="100" placeholder="请输入拼团介绍" />
                <Icon class="ml-5px c-red cursor-pointer" icon="ep:delete" @click="handleDelete('introduce1', index)" />
            </div>
        </el-form-item>
        <el-form-item :label="formData.introduce1.length ? '' : '拼团介绍'">
            <el-button class="button-new-tag ml-1" size="small" @click="handleAdd('introduce1')">
                + 添加
            </el-button>
        </el-form-item> -->
        <el-form-item :label="index === 0 ? '课程介绍' : ''" v-for="item, index in formData.courseWords" :key="index">
            <div class="w-100% flex flex-items-center">
                <el-input v-model="formData.courseWords[index]" :maxlength="100" placeholder="请输入课程介绍" />
                <Icon class="ml-5px c-red cursor-pointer" icon="ep:delete" @click="handleDelete('courseWords', index)" />
            </div>
        </el-form-item>
        <el-form-item :label="formData.courseWords.length ? '' : '课程介绍'">
            <el-button class="button-new-tag ml-1" size="small" @click="handleAdd('courseWords')">
                + 添加
            </el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import type { Spu } from '@/api/mall/product/spu'
import { PropType } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { copyValueToTarget } from '@/utils'

defineOptions({ name: 'ProductOtherForm' })

const message = useMessage() // 消息弹窗

const props = defineProps({
    propFormData: {
        type: Object as PropType<Spu>,
        default: () => { }
    },
    isDetail: propTypes.bool.def(false) // 是否作为详情组件
})

const formRef = ref() // 表单Ref
// 表单数据
const formData = ref<Spu>({
    courseFeatures: [], // 课程特点
    courseWords: [], // 课程介绍
})
// 表单规则
const rules = reactive({
    // courseFeatures: [required]
})

/** 将传进来的值赋值给 formData */
watch(
    () => props.propFormData,
    (data) => {
        if (!data) {
            return
        }
        copyValueToTarget(formData.value, data)
    },
    {
        immediate: true
    }
)

/** 新增子项 */
const handleAdd = (key: string) => {
    formData.value[key]?.push('');
}

/** 删除子项 */
const handleDelete = (key: string, index: number) => {
    formData.value[key]?.splice(index, 1);
}

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
    if (!formRef) return
    try {
        await unref(formRef)?.validate()
        // 校验通过更新数据
        Object.assign(props.propFormData, formData.value)
    } catch (e) {
        message.error('【其它设置】不完善，请填写相关信息')
        emit('update:activeName', 'other')
        throw e // 目的截断之后的校验
    }
}
defineExpose({ validate })
</script>
